/// <reference path="_variables-shared.scss" />
/// <reference path="../bs4/scss/bootstrap.scss" />

// Mixins
// ========================================================================

@mixin center($xy: xy) {
    @if $xy == xy {
        left: 50%;
        top: 50%;
        bottom: auto;
        right: auto;
        transform: translateX(-50%) translateY(-50%);
    }
    @else if $xy == x {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
    @else if $xy == y {
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
    }
}

@mixin bubble($direction: "left", $alignment: "near", $size: 10, $backgroundColor: #fff, $borderColor: $card-border-color, $offset: 24px) {
    // defaults for direction = left
    $elemAlignment: "right";
    $firstBorder: "top";
    $secondBorder: "bottom";

    @if $direction == "right" {
        $elemAlignment: "left";
    } @else if $direction == "top" {
        $elemAlignment: "bottom";
        $firstBorder: "left";
        $secondBorder: "right";
    } @else if $direction == "bottom" {
        $elemAlignment: "top";
        $firstBorder: "left";
        $secondBorder: "right";
    }

    &:before, &:after {
        content: '' !important;
        display: inline-block;
        position: absolute;
    }

    &:before {
        border-#{$firstBorder}: #{$size}px solid transparent;
        border-#{$secondBorder}: #{$size}px solid transparent;
        border-#{$elemAlignment}: #{$size}px solid $borderColor;
        //border-#{$elemAlignment}-color: rgba(0, 0, 0, 0.2);
        #{$direction}: -#{$size}px;

        @if $alignment == "near" {
            #{$firstBorder}: $offset;
        } @else if $alignment == "center" {
            #{$firstBorder}: 50%;
            margin-#{$firstBorder}: -#{$size + 1}px;
        } @else if $alignment == "far" {
            #{$secondBorder}: $offset;
        }
    }

    &:after {
        border-#{$firstBorder}: #{$size - 1}px solid transparent;
        border-#{$secondBorder}: #{$size - 1}px solid transparent;
        border-#{$elemAlignment}: #{$size - 1}px solid $backgroundColor;
        #{$direction}: -#{$size - 1}px;

        @if $alignment == "near" {
            #{$firstBorder}: $offset+1px;
        } @else if $alignment == "center" {
            #{$firstBorder}: 50%;
            margin-#{$firstBorder}: -#{$size}px;
        } @else if $alignment == "far" {
            #{$secondBorder}: $offset+1px;
        }
    }
}

@mixin fontastic($content, $size: 20px) {
    display: inline-block;
    font: normal normal normal 16px/1 'fontastic';
    font-size: $size;
    speak: none;
    text-transform: none;
    content: $content;
}

@mixin fontawesome($content, $size: $icon-font-size-base, $variant: $icon-font-variant-default) {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    line-height: 1;

    font-size: $size;
    @include fontawesome-font($content, $variant);
}

@mixin fontawesome-font($content, $variant: $icon-font-variant-default) {
    @if $fa-use-pro == false and $variant == "light" {
        $variant: regular;
    }
    
    @if $fa-use-pro == false and $variant == "regular" {
        @if not(map-has-key($fa-free-regular-icons, $content)) {
            $variant: solid;
        }
    }

    @if $variant == "brand" {
        font-family: $fa-font-family-brands;
        font-weight: 400;
    }
    @else {
        font-weight: map-get($icon-font-variants, $variant);
        @if $fa-use-pro {
            font-family: $fa-font-family-pro;
        }
        @else {
            font-family: $fa-font-family-free;
        }
    }

    content: $content;
}

@mixin active-list-item($size: 4px, $color: theme-color("warning")) {
    position: absolute;
    display: block;
    content: ' ';
    left: -1px;
    top: -1px;
    bottom: -1px;
    width: $size;
    background: $color;
}

@mixin font-inherit() {
	font-family: inherit;
	font-weight: inherit;
	font-style: inherit;
	color: inherit;
	font-size: inherit;
	color: inherit;
	text-decoration: inherit;
}

@mixin smaller() {
    font-size: $font-size-sm !important;
}


// Functions
// ===============================================

@function scrim-gradient($start-color: #000, $direction: 'to bottom', $radial: false) {
    $coords: (
        0: 1,
        19: 0.738,
        34: 0.541,
        47: 0.382,
        56.5: 0.278,
        65: 0.194,
        73: 0.126,
        80.2: 0.075,
        86.1: 0.042,
        91: 0.021,
        95.2: 0.008,
        98.2: 0.002,
        100: 0
    );

    $hue: hue($start-color);
    $saturation: saturation($start-color);
    $lightness: lightness($start-color);
    $stops: ();

    @each $colorstop, $alpha in $coords {
        $stop: hsla($hue, $saturation, $lightness, $alpha) percentage($colorstop/100);
        $stops: append($stops, $stop, comma);
    }

    @if $radial == true {
        @return radial-gradient(unquote(#{ $direction }), #{ $stops });
    }
    @else {
        @return linear-gradient(unquote(#{ $direction }), #{ $stops });
    }   
}

@function color-yiq-ex($color, $text-dark: $yiq-text-dark, $text-light: $yiq-text-light) {
	$r: red($color);
	$g: green($color);
	$b: blue($color);

	$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;

	@if ($yiq >= $yiq-contrasted-threshold) {
		@return $text-dark;
	}
	@else {
		@return $text-light;
	}
}